<template>
  <div class="container">
    <h3 align="center" v-text="book.title"></h3>
    <div class="info" v-if="book.title">
      <p  v-for="info in infos" v-text="info"></p>
      <p>简介：{{book.desc}}</p>
    </div>
    <mt-button class="btn-center"  @click="catalog = true" v-if="book.title">目录</mt-button>
    <p class="none" v-else>暂无数据</p>
    <mt-cell
      v-for="item in book.chapters"
      :title="item.name"
      :to="'/reader/r?url='+item.url"
      :key="item.name"
      is-link
    >
    </mt-cell>


    <mt-popup
      v-model="catalog"
      position="bottom">
      <div  class="popup-scroll">
        <mt-cell  v-for="item in book.pages"
                  :title="item.name"
                  :to="'/reader/b?page='+item.url"
                  :key="item.name"
                  is-link></mt-cell>
      </div>
    </mt-popup>
  </div>
</template>

<script>
  import store from '@/store'
  import fetch from '@/utils/fetch';
  import { mapGetters } from 'vuex';

  const book = store.getters.book
  export default {
    metaInfo: {
      // if no subcomponents specify a metaInfo.title, this title will be used
      title: book.title,
      // all titles will be injected into this template
      titleTemplate: '%s | 小说阅读'
    },
    name: "B",
    data(){
      return {
        catalog: false,
        infos:[]
      }
    },
    beforeRouteUpdate (to, from, next) {
      const pages = to.query.page
      this.getBook(pages)
      next()
    },
    created(){
      this.getBook()
    },
    activated(){
      this.getBook()
    },
    computed: {
      ...mapGetters([
        'book'
      ])
    },
    methods:{
      getBook(pageurl){
        const url = this.book.link||this.$route.query.url
        if(pageurl||url){
          fetch.get(`api/novel?url=${pageurl||url}`).then(res=>{
            if(res.data.title){
              this.$store.dispatch('storeBook',res.data)
              this.catalog = false;
              this.infos = res.data.author.replace(/\n/g,',').replace(/\s/g,'').split(',');
              this.infos.shift();
            }
          })
        }
      }
    }
  }
</script>

<style scoped>
  .btn-center{
    margin: 10px auto;
    display: block;
  }
  .info{
    padding: 10px 10px;
    border-bottom: 1px solid;
    line-height: 1.4em;
  }

  .container{
    text-align: left;
    padding: 10px 0 55px;
    min-height: calc(100vh - 100px);
    overflow-y: scroll;
  }
  .popup-scroll{
    width: 100vw;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling:touch;
    overflow-y: scroll;
    max-height: 50vh;
  }
  .popup-scroll p{
    border-bottom: 1px solid #bfbfbf;
    padding: 5px 0;
    text-align: left;
    text-indent: 1em;
  }
</style>
